<template>
  <div class="container">
    <uni-nav-bar class="nav-bar" title="我邀请的VIP用户" statusBar="true" leftIcon="left" @clickLeft="back" :border="false"
      backgroundColor="#00000000"></uni-nav-bar>
    <!-- 用户列表 -->
    <div class="user-list" v-if="invitedVipUser.length">
      <div class="user-item" v-for="item in invitedVipUser" :key="item.id">
        <image class="user-avatar" :src="item.avatar" alt="" mode="aspectFill" />
        <div class="user-name">{{ item.name + '支付' + item.money + '元'}}</div>
        <!-- <div class="money">{{ item.money }}</div> -->
        <div class="user-time">{{ item.time }}</div>
        <!-- 通过该用户获取的收益，保留小数点后两位 -->
        <div class="income">+{{ Number(item.income).toFixed(2) }}</div>
      </div>
    </div>
    <div class="user-list" v-else>
      <span class="none-tip">暂无邀请的VIP用户~</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { back } from '@/utils/navigate';
import { useUser } from '@/stores/user-store'
import { storeToRefs } from 'pinia';

const userStore = useUser();
const { invitedVipUser } = storeToRefs(userStore);

// 用户列表
// const userList = [
//   {
//     id: 1,
//     name: '张三',
//     time: '2021-01-01',
//     income: 12
//   },
//   {
//     id: 2,
//     name: '李四',
//     time: '2021-01-01',
//     income: 12
//   },
//   {
//     id: 3,
//     name: '王五',
//     time: '2021-01-01',
//     income: 12
//   },
//   {
//     id: 4,
//     name: '赵六',
//     time: '2021-01-01',
//     income: 12
//   },
//   {
//     id: 5,
//     name: '张三',
//     time: '2021-01-01',
//     income: 12
//   },
//   {
//     id: 6,
//     name: '李四',
//     time: '2021-01-01',
//     income: 12
//   },
//   {
//     id: 7,
//     name: '王五',
//     time: '2021-01-01',
//     income: 12
//   },
//   {
//     id: 8,
//     name: '赵六',
//     time: '2021-01-01',
//     income: 12
//   },
// ];

</script>

<style lang="scss" scoped>
.container {
  display: grid;
  row-gap: 16px;

  .user-list {
    display: grid;
    grid-auto-rows: 13.8462vw;
    
    .none-tip {
      width: 100%;
      margin-top: 77rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(0, 0, 0, .6);
      font-size: 38rpx;
      margin-top: 288rpx;
    }

    .user-item {
      border-bottom: 1px solid rgba($color: #cecece, $alpha: 0.16);

      display: grid;
      grid-template:
        "user-avatar user-name money income" 1fr
        "user-avatar user-time user-time income" 1fr
        / 9.2308vw auto 1fr;
      gap: 6px 10px;
      align-items: center;
      padding: 10px 15px;

      .user-avatar {
        grid-area: user-avatar;
        width: 9.2308vw;
        height: 9.2308vw;

        border-radius: 50%;
        overflow: hidden;
      }

      .user-name {
        grid-area: user-name;
        align-self: end;
        font-size: 3.3333vw;
        color: #333333;
      }
      
      /* .money {
        grid-area: money;
        align-self: end;
        font-size: 3.3333vw;
        color: #333333;
      } */

      .user-time {
        grid-area: user-time;
        font-size: 3.3333vw;
        color: #bababa;
      }

      .income {
        grid-area: income;
        justify-self: flex-end;
        font-size: 4.359vw;
        color: #27ae60;
      }
    }
  }
}
</style>
